<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .like {
            margin: 0;
            padding: 0;
            display: flex;
        }
        .like li {
            list-style: none;
            margin-right: 10px;
        }
  </style>
</head>
<body>
  <div id="app">
    <div>请选择你喜欢的专栏</div>
    <ul class="like">
        <li v-for="(item,index) in listlength" :key="item.id" >
            <input type="checkbox" name="interest" id="" v-model="item.isChecked" @click="like(item)">
            <span>{{item.name}}</span>
        </li>
    </ul>
    <ul v-show="likeList.length" v-for="item in likeList">
        <li>{{item}}</li>
    </ul>
</div>
<script src="./vue.js"></script>
</body>
<script>
  const app = new Vue({
    el: "#app",
    data: {
        list:["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
        listlength:[],
        likeList:[]
    },
    methods:{
        like(item){
            // 如果当前已经被选中
            if (item.isChecked){
                const index = this.likeList.findIndex(ele => ele === item.name)
                this.likeList.splice(index,1)
                // 取消喜欢
            }else {
                // 当前没有被选中
                this.likeList.push(item.name)
            }
            item.isChecked = !item.isChecked
        }
    },
    mounted(){
        this.listlength = this.list.map(ele =>  {
          return {
            id: Date.now(),
            name:ele,
            isChecked:false
          }
        })
        console.log('list',this.listlength);
        
    }
  });
</script>
</html>